<template>
    <div class="forward-guide"> 000000000000000000000000000000000000000000
        <div class="guide-header">
            <h1>📤 消息转发功能使用指南</h1>
            <p class="subtitle">本指南将帮助您理解和使用消息转发功能，轻松实现群发转发</p>
        </div>

        <div class="guide-section">
            <h2>什么是消息转发？</h2>
            <p>消息转发功能允许您将Telegram中的任何消息（文本、图片、视频、文件等）通过机器人转发给多个用户或群组，无需手动逐一转发。</p>
        </div>

        <div class="guide-section">
            <h2>如何获取原始消息ID？</h2>
            <p>要转发消息，您需要先获取原始消息ID。有以下几种方法：</p>

            <div class="method-card">
                <h3>方法一：直接转发消息给机器人</h3>
                <p>1. 在Telegram中找到您想要转发的消息</p>
                <p>2. 长按该消息，选择"转发"</p>
                <p>3. 选择机器人作为转发对象</p>
                <p>4. 机器人会自动回复消息的原始ID</p>
                <div class="tip">
                    <strong>提示：</strong> 这是最简单的方法，机器人会为您提取所有必要信息
                </div>
            </div>

            <div class="method-card">
                <h3>方法二：使用 /get_msg_id 命令</h3>
                <p>1. 在任何聊天中找到您想要转发的消息</p>
                <p>2. 回复该消息（点击消息然后选择"回复"）</p>
                <p>3. 在回复框中输入 <code>/get_msg_id</code> 并发送</p>
                <p>4. 机器人会回复原始消息ID</p>
                <div class="tip">
                    <strong>提示：</strong> 适用于想要获取群组内任何消息ID的情况
                </div>
            </div>

            <div class="method-card">
                <h3>方法三：使用 /my_msg_id 命令</h3>
                <p>1. 在任何聊天中发送 <code>/my_msg_id</code> 命令</p>
                <p>2. 机器人会返回这条命令消息的ID</p>
                <div class="tip">
                    <strong>提示：</strong> 适用于需要快速获取当前对话的聊天ID的情况
                </div>
            </div>
        </div>

        <div class="guide-section">
            <h2>如何创建转发任务？</h2>
            <p>获取到原始消息ID后，按照以下步骤创建转发任务：</p>
            <ol>
                <li>在管理后台导航到"群发消息"模块</li>
                <li>点击"创建新任务"按钮</li>
                <li>填写任务名称（如"每周通知"）</li>
                <li>选择消息类型为"转发消息"</li>
                <li>在"原始消息ID"字段中粘贴您之前获取的ID</li>
                <li>选择发送目标（特定群组、用户或全部）</li>
                <li>设置发送时间（立即发送或定时发送）</li>
                <li>点击"保存"完成创建</li>
            </ol>
        </div>

        <div class="guide-section">
            <h2>转发消息的格式要求</h2>
            <p>原始消息ID的格式必须为：<code>聊天ID:消息ID</code></p>
            <p>例如：<code>-1001234567890:1234</code> 或 <code>123456789:5678</code></p>
            <div class="warning">
                <strong>注意：</strong> 确保格式正确，否则转发将失败。最简单的方法是使用机器人提供的ID，不要手动修改。
            </div>
        </div>

        <div class="guide-section">
            <h2>常见问题</h2>

            <div class="faq-item">
                <h3>Q: 为什么我的转发失败了？</h3>
                <p>A: 常见原因包括：</p>
                <ul>
                    <li>原始消息ID格式不正确</li>
                    <li>原始消息已被删除</li>
                    <li>机器人没有访问原始消息的权限</li>
                    <li>目标用户或群组已将机器人拉黑或删除</li>
                </ul>
            </div>

            <div class="faq-item">
                <h3>Q: 机器人能转发任何消息吗？</h3>
                <p>A: 机器人只能转发它能访问到的消息。如果消息来自私密群组或频道，机器人必须是其成员才能转发。</p>
            </div>

            <div class="faq-item">
                <h3>Q: 如何查看转发任务的执行结果？</h3>
                <p>A: 在"群发消息"页面可以查看任务列表，点击任务旁边的"查看详情"按钮可以查看详细的执行结果。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ForwardGuide'
}
</script>

<style scoped>
.forward-guide {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
}

.guide-header {
    text-align: center;
    margin-bottom: 30px;
}

.guide-header h1 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.subtitle {
    color: #666;
    font-size: 16px;
}

.guide-section {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.guide-section h2 {
    color: #409EFF;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 22px;
}

.method-card {
    background: #f9f9f9;
    border-left: 4px solid #409EFF;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.method-card h3 {
    color: #2c3e50;
    margin-top: 0;
    font-size: 18px;
}

.tip {
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
}

.warning {
    background: #fff8e6;
    border: 1px solid #ffe58f;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
}

code {
    background: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 14px;
}

ol,
ul {
    padding-left: 20px;
}

li {
    margin-bottom: 8px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-item h3 {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 8px;
}
</style>